docs(chatbot): add component pages by danielleroux · Pull Request #244 · siemens/ix-docs

danielleroux · 2026-05-28T06:30:18Z

💡 What is the current behavior?

Jira: IX-4307 and IX-4410

🆕 What is the new behavior?

Implementation is here: siemens/ix#2569

👨‍💻 Help & support

Summary by CodeRabbit

Documentation
- Added comprehensive usage guides and interactive code examples for Chat, Chat input, User message, AI message, and Chat attachment components.
- Added API and properties references for the new chat-related components.
- Introduced a Chat category to the components overview and documentation sidebar.
- Documented component anatomy, behavior, states, accessibility considerations, and recommended usage patterns.

gemini-code-assist

Code Review

This pull request introduces documentation and sidebar configuration for new AI chatbot components, including an overview, chat input, user message, and AI message. The reviewer provided feedback on several markdown files to align the component descriptions with the repository style guide, specifically recommending the use of plural component names, active voice, and referring to 'users' instead of 'the user'. All review comments are valid and should be addressed.

Expand the chat-input documentation with a full usage guide (anatomy, options, behavior/overflow, states, dos & don'ts, and related links). Also add three Figma illustration PNGs to static/figma to support the new documentation.

netlify · 2026-06-10T11:17:29Z

✅ Deploy Preview for industrial-experience ready!

Name	Link
🔨 Latest commit	`2aef4a0`
🔍 Latest deploy log	https://app.netlify.com/projects/industrial-experience/deploys/6a5f3aa2e34fa300084eaac5
😎 Deploy Preview	https://deploy-preview-244--industrial-experience.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai · 2026-06-10T11:17:31Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d5584c86-37ff-42db-8c17-16c068341b0b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

📝 Walkthrough

Walkthrough

Changes

Chat documentation

Layer / File(s)	Summary
Component metadata and code pages `docs/components/{chat,chat-input,user-message,ai-message,chat-attachment}/*`	Added tabbed metadata, interactive playgrounds, and props/API references for five chat-related components.
Component usage guidance `docs/components/{chat,chat-input,user-message,ai-message,chat-attachment}/guide.md`	Added usage, anatomy, options, behavior, states, dos and don’ts, and related links.
Component catalog and sidebar `docs/components/overview.md`, `sidebars.ts`	Added Chat to the component overview and sidebar navigation with five tabbed entries.

Pull-request environment

Layer / File(s)	Summary
Pull-request context variables `.env.pullrequest`	Defined documentation branch, branch type, and pull-request number variables.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: nuke-ellington

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding documentation pages for chatbot components.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch docs/ai-components

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

* new guide for ai message * new guide for chat * new guide for user message * renamed folder and chat (removed AI)

flxlst09

Like it, very concise!

Chat attachment still open
Entries in component overview missing
How to link to Conversational guidelines (UX Writing)
How to mention that a SDL AI Figma file exists for Siemens users

And some smaller stuff :)

Add a new Chat attachment usage guide (anatomy, options, behavior, states, dos/don’ts) and include a related Figma image. Refine copy across chat-related docs: AI message, Chat input, and User message (clarify wording and responsiveness). Update sidebars labels for chat and chat-attachment, and update/add several Figma static images.

removed the deeplink to the icon until we know how to do them

flxlst09

Reviewed the md, preview deployment did not work. Only smaller stuff, good to go once addressed

tokyojen

Added quite a lot of comments to try to make sure it matches with Sidhu and our content. Might need to check a few things together.

tokyojen

Added quite a lot of comments to try to make sure it matches with Sidhu and our content. Might need to check a few things together.

Co-authored-by: Kathrin <123640803+kathrinschalber@users.noreply.github.com>

flxlst09

Some polishing suggestions and one thing we should check: linked Figma files should be accessible for Siemens Figma users without requesting access.

- Fix indentation of nested list items in chat, chat-input, and chat-attachment guides - Clarify tooltip behavior for truncated attachment filenames - Update chat-input states count from six to four - Add responsiveness info (max-width: 45rem) to chat component - Minor wording improvements and link restructuring - Update chat-input states screenshot

…ents

tokyojen

Great - many thanks for the alignment! Good to go! No more comments or changes.

coderabbitai

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/components/chat-attachment/code.mdx`:
- Around line 6-7: Update the ChatAttachmentPlayground import in the chat
attachment documentation to reference the chat-attachment playground MDX module
instead of chat-user-message.mdx. Leave the PropsApi import unchanged.

In `@docs/components/chat-input/guide.md`:
- Line 27: Update the disclaimer link in the documented AI disclaimer text to
use descriptive link text that identifies the Siemens AG legal disclaimers,
rather than the generic “here,” while preserving the existing destination URL
and surrounding guidance.

In `@docs/components/overview.md`:
- Line 186: Update the AI message description in the overview table to correct
the grammar, replacing “in a conversational chats” with either “in a
conversational chat” or “in conversational chats.”

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 40a4291e-fa47-4e7f-a04d-3319e5ade544

📥 Commits

Reviewing files that changed from the base of the PR and between 4176221 and 591836d.

⛔ Files ignored due to path filters (8)

static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_2809.png is excluded by !**/*.png
static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_7020.png is excluded by !**/*.png
static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_7427.png is excluded by !**/*.png
static/figma/wEptRgAezDU1z80Cn3eZ0o_7959_1370.png is excluded by !**/*.png
static/figma/wEptRgAezDU1z80Cn3eZ0o_7959_520.png is excluded by !**/*.png
static/figma/wEptRgAezDU1z80Cn3eZ0o_7962_804.png is excluded by !**/*.png
static/figma/wEptRgAezDU1z80Cn3eZ0o_7970_230.png is excluded by !**/*.png
static/figma/wEptRgAezDU1z80Cn3eZ0o_7974_3280.png is excluded by !**/*.png

📒 Files selected for processing (18)

.env.pullrequest
docs/components/ai-message/code.mdx
docs/components/ai-message/guide.md
docs/components/ai-message/index.mdx
docs/components/chat-attachment/code.mdx
docs/components/chat-attachment/guide.md
docs/components/chat-attachment/index.mdx
docs/components/chat-input/code.mdx
docs/components/chat-input/guide.md
docs/components/chat-input/index.mdx
docs/components/chat/code.mdx
docs/components/chat/guide.md
docs/components/chat/index.mdx
docs/components/overview.md
docs/components/user-message/code.mdx
docs/components/user-message/guide.md
docs/components/user-message/index.mdx
sidebars.ts

coderabbitai · 2026-07-20T07:32:17Z

+import ChatAttachmentPlayground from '@site/docs/autogenerated/playground/chat-user-message.mdx';
+import PropsApi from '@site/docs/autogenerated/api/ix-chat-attachment/api.mdx';


🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Correct the playground import for chat attachment.

It looks like chat-user-message.mdx was accidentally imported here instead of the chat attachment playground due to a copy-paste error.

🐛 Proposed fix

-import ChatAttachmentPlayground from '`@site/docs/autogenerated/playground/chat-user-message.mdx`'; +import ChatAttachmentPlayground from '`@site/docs/autogenerated/playground/chat-attachment.mdx`'; import PropsApi from '`@site/docs/autogenerated/api/ix-chat-attachment/api.mdx`';

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

import ChatAttachmentPlayground from '@site/docs/autogenerated/playground/chat-user-message.mdx';

import PropsApi from '@site/docs/autogenerated/api/ix-chat-attachment/api.mdx';

import ChatAttachmentPlayground from '`@site/docs/autogenerated/playground/chat-attachment.mdx`';

import PropsApi from '`@site/docs/autogenerated/api/ix-chat-attachment/api.mdx`';

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/components/chat-attachment/code.mdx` around lines 6 - 7, Update the ChatAttachmentPlayground import in the chat attachment documentation to reference the chat-attachment playground MDX module instead of chat-user-message.mdx. Leave the PropsApi import unchanged.

coderabbitai · 2026-07-20T07:32:18Z

+- **Attachment slot:** Optionally include a slot for [attachments](../chat-attachment/).
+- **Start slot:** Add secondary actions. We recommend using tertiary outline [icon buttons](../icon-button) and trying to stick to one action. If you have more than one action, use [dropdown buttons](../dropdown-button/).
+- **End slot:** Use this slot to add alternative input methods, e.g. voice input.
+- **Disclaimer:** In AI contexts, we recommend including a visible disclaimer under the input instead of under each [AI message](../ai-message/). For Siemens AG products, find legal disclaimers [here](https://code.siemens.com/siemens-ix/ix-brand-theme/-/blob/main/apps/documentation/src/pages/legal-disclaimers-copilots.md).


📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Use descriptive link text.

Using "here" as the link text is bad for accessibility and readability. It's better to use descriptive text for the link.

💡 Proposed fix

-- **Disclaimer:** In AI contexts, we recommend including a visible disclaimer under the input instead of under each [AI message](../ai-message/). For Siemens AG products, find legal disclaimers [here](https://code.siemens.com/siemens-ix/ix-brand-theme/-/blob/main/apps/documentation/src/pages/legal-disclaimers-copilots.md). +- **Disclaimer:** In AI contexts, we recommend including a visible disclaimer under the input instead of under each [AI message](../ai-message/). For Siemens AG products, refer to the [legal disclaimers](https://code.siemens.com/siemens-ix/ix-brand-theme/-/blob/main/apps/documentation/src/pages/legal-disclaimers-copilots.md).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

- **Disclaimer:** In AI contexts, we recommend including a visible disclaimer under the input instead of under each [AI message](../ai-message/). For Siemens AG products, find legal disclaimers [here](https://code.siemens.com/siemens-ix/ix-brand-theme/-/blob/main/apps/documentation/src/pages/legal-disclaimers-copilots.md).

- **Disclaimer:** In AI contexts, we recommend including a visible disclaimer under the input instead of under each [AI message](../ai-message/). For Siemens AG products, refer to the [legal disclaimers](https://code.siemens.com/siemens-ix/ix-brand-theme/-/blob/main/apps/documentation/src/pages/legal-disclaimers-copilots.md).

🧰 Tools

🪛 markdownlint-cli2 (0.23.0)

[warning] 27-27: Link text should be descriptive

(MD059, descriptive-link-text)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/components/chat-input/guide.md` at line 27, Update the disclaimer link in the documented AI disclaimer text to use descriptive link text that identifies the Siemens AG legal disclaimers, rather than the generic “here,” while preserving the existing destination URL and surrounding guidance.

Source: Linters/SAST tools

coderabbitai · 2026-07-20T07:32:18Z

+| [Chat](./chat/index.mdx)                             | Chat component for building conversational chatbot experiences.                                                             |
+| [Chat input](./chat-input/index.mdx)                 | Chat inputs are used to compose and submit messages, attachments and follow-up actions in a conversational AI thread.                      |
+| [User message](./user-message/index.mdx)             | User messages display messages authored by the user in a chat thread.                           |
+| [AI message](./ai-message/index.mdx)                 | AI messages display responses generated by the AI in a conversational chats.                                           |


📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Fix typographical error in the description.

The phrase "in a conversational chats" is grammatically incorrect. Please update it to "in a conversational chat" or "in conversational chats" for better clarity.

📝 Proposed fix

-| [AI message](./ai-message/index.mdx) | AI messages display responses generated by the AI in a conversational chats. | +| [AI message](./ai-message/index.mdx) | AI messages display responses generated by the AI in a conversational chat. |

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

| [AI message](./ai-message/index.mdx) | AI messages display responses generated by the AI in a conversational chats. |

| [AI message](./ai-message/index.mdx) | AI messages display responses generated by the AI in a conversational chat. |

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/components/overview.md` at line 186, Update the AI message description in the overview table to correct the grammar, replacing “in a conversational chats” with either “in a conversational chat” or “in conversational chats.”

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>

add chatbot files and show them in sidebar

09a961b

danielleroux mentioned this pull request May 28, 2026

feat(core/chat): add new chat components siemens/ix#2569

Merged

9 tasks

gemini-code-assist Bot reviewed May 28, 2026

View reviewed changes

danielleroux marked this pull request as draft May 28, 2026 06:31

danielleroux and others added 4 commits May 28, 2026 10:42

add code examples to chat components

2b24d18

add attachment

d4a9fd9

Add chat-input usage guide and illustrations

ef92031

Expand the chat-input documentation with a full usage guide (anatomy, options, behavior/overflow, states, dos & don'ts, and related links). Also add three Figma illustration PNGs to static/figma to support the new documentation.

a change

e9c70ba

Kathrin added 3 commits June 22, 2026 13:47

added new guides, revamped after discussion

1a5a251

* new guide for ai message * new guide for chat * new guide for user message * renamed folder and chat (removed AI)

fixed link and attachment file naming

49c2eb8

fix link

d2d60e0

kathrinschalber requested a review from flxlst09 June 22, 2026 12:30

flxlst09 requested changes Jun 23, 2026

View reviewed changes

Kathrin added 5 commits June 24, 2026 13:19

fixed link and added guides to component overview

ad8288b

re-added deeplink to icon

138bf85

added chat image for overview

47430e6

remove link

db3c924

removed the deeplink to the icon until we know how to do them

kathrinschalber requested a review from flxlst09 June 24, 2026 12:02

flxlst09 requested changes Jun 25, 2026

View reviewed changes

Comment thread docs/components/chat-attachment/guide.md Resolved

Comment thread docs/components/chat-attachment/guide.md Resolved

Comment thread docs/components/chat-attachment/guide.md Resolved

added tooltip description for attachments

b4175bf

kathrinschalber requested a review from flxlst09 June 26, 2026 08:54

flxlst09 previously approved these changes Jun 26, 2026

View reviewed changes

kathrinschalber marked this pull request as ready for review June 26, 2026 09:07

kathrinschalber requested a review from tokyojen June 26, 2026 09:07

kathrinschalber marked this pull request as draft June 26, 2026 13:23

tokyojen requested changes Jun 30, 2026

View reviewed changes

Kathrin added 3 commits July 7, 2026 11:48

Added full stops to descriptions

a49f1fb

Added full stop to description

6191a0a

apply feedback from jennies review

7de29b2

Base automatically changed from development to main July 9, 2026 08:32

Apply suggestions from code review

4293936

Co-authored-by: Kathrin <123640803+kathrinschalber@users.noreply.github.com>

kathrinschalber requested a review from flxlst09 July 9, 2026 13:53

flxlst09 requested changes Jul 9, 2026

View reviewed changes

kathrinschalber requested a review from tokyojen July 14, 2026 08:34

danielleroux added 3 commits July 16, 2026 09:27

Merge remote-tracking branch 'origin/development' into docs/ai-compon…

aa10446

…ents

Merge branch 'main' into docs/ai-components

0fa5ee5

remove skill

dd725bb

tokyojen previously approved these changes Jul 16, 2026

View reviewed changes

fix chat-attachment name

591836d

danielleroux dismissed tokyojen’s stale review via 591836d July 20, 2026 07:15

danielleroux marked this pull request as ready for review July 20, 2026 07:28

coderabbitai Bot reviewed Jul 20, 2026

View reviewed changes

danielleroux changed the base branch from main to development July 21, 2026 06:58

Merge branch 'development' into docs/ai-components

df5f5bc

danielleroux requested a review from flxlst09 July 21, 2026 06:59

update pull request env

42dfe80

flxlst09 previously approved these changes Jul 21, 2026

View reviewed changes

Update conversational design illustrations (#256)

2ad8093

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>

danielleroux dismissed flxlst09’s stale review via 2ad8093 July 21, 2026 08:32

danielleroux requested a review from flxlst09 July 21, 2026 08:33

flxlst09 previously approved these changes Jul 21, 2026

View reviewed changes

remove pullrequest link

2aef4a0

danielleroux dismissed flxlst09’s stale review via 2aef4a0 July 21, 2026 09:23

danielleroux merged commit a53578a into development Jul 21, 2026
6 checks passed

danielleroux deleted the docs/ai-components branch July 21, 2026 12:24

		import ChatAttachmentPlayground from '@site/docs/autogenerated/playground/chat-user-message.mdx';
		import PropsApi from '@site/docs/autogenerated/api/ix-chat-attachment/api.mdx';

	- Disclaimer: In AI contexts, we recommend including a visible disclaimer under the input instead of under each [AI message](../ai-message/). For Siemens AG products, find legal disclaimers [here](https://code.siemens.com/siemens-ix/ix-brand-theme/-/blob/main/apps/documentation/src/pages/legal-disclaimers-copilots.md).
	- Disclaimer: In AI contexts, we recommend including a visible disclaimer under the input instead of under each [AI message](../ai-message/). For Siemens AG products, refer to the [legal disclaimers](https://code.siemens.com/siemens-ix/ix-brand-theme/-/blob/main/apps/documentation/src/pages/legal-disclaimers-copilots.md).

	\| [AI message](./ai-message/index.mdx) \| AI messages display responses generated by the AI in a conversational chats. \|
	\| [AI message](./ai-message/index.mdx) \| AI messages display responses generated by the AI in a conversational chat. \|

Conversation

danielleroux commented May 28, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💡 What is the current behavior?

🆕 What is the new behavior?

👨‍💻 Help & support

Summary by CodeRabbit

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

netlify Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for industrial-experience ready!

Uh oh!

coderabbitai Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Uh oh!

flxlst09 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flxlst09 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tokyojen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tokyojen left a comment

Choose a reason for hiding this comment

Uh oh!

flxlst09 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tokyojen left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

danielleroux commented May 28, 2026 •

edited by coderabbitai Bot

Loading

netlify Bot commented Jun 10, 2026 •

edited

Loading

coderabbitai Bot commented Jun 10, 2026 •

edited

Loading